<template>
  <div class="app-bg auto">
    <div class="auto" style="background:#108ADD;text-align:center; padding:10px 0px;color:#FFF;font-size: 18px;">
      博能燃气手机抄表
    </div>
      <div class="row app-input">
        <label class="col-xs-4 control-label text-left">表册号</label>
        <input class="col-xs-8" v-model="model.f_meterbook_id" placeholder="请输入表册号">
      </div>
      <div class="row app-input">
        <label class="col-xs-4 control-label text-left">用户编号</label>
        <input class="col-xs-8" v-model="model.f_userinfo_id" placeholder="请输入用户编号">
      </div>
      <div class="row app-input">
        <label class="col-xs-4 control-label text-left">用户姓名</label>
        <input class="col-xs-8" v-model="model.f_user_name" placeholder="请输入用户姓名">
      </div>
      <div class="row app-input">
        <label class="col-xs-4 control-label text-left">用户地址</label>
        <input class="col-xs-8" v-model="model.f_address" placeholder="请输入用户地址">
      </div>
      <div class="row app-input">
        <label class="col-xs-4 control-label text-left">缴费时间</label>
        <datepicker
          :value.sync="model.f_delivery_date"
          :disabled-days-of-week="[]"
          :format="'yyyy-MM-dd'"
          :show-rest-button="reset"
          v-model="model.f_delivery_date">
        </datepicker>
      </div>
      <div class="app-btn">
      <button type="button" name="button" class="btn btn-primary"  @click="this.$back()">
        <span  class="glyphicon glyphicon-remove-circle" style="margin-right: 15px;"></span>返回
      </button>
      <button type="button" name="button" class="btn btn-primary"  @click="search()">
        <span  class="glyphicon glyphicon-zoom-in" style="margin-right: 15px;"></span>查询
      </button>
    </div>

    <div  class="app-list">
      <div class="row" style="color: #00B9F1;">
        <span class="col-xs-3">户号：</span><span class="col-xs-3">{{user[0].f_userinfo_id}}</span>
        <span class="col-xs-3">姓名：</span><span class="col-xs-3">{{user[0].f_user_name}}</span>
      </div>
      <div class="row">
        <span class="col-xs-4">用户地址：</span><span class="col-xs-8">{{user[0].f_address}}</span>
      </div>
      <div class="row">
        <span class="col-xs-4">缴费时间：</span><span class="col-xs-8">{{user[0].f_delivery_date}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import * as Util from '../Util'
import appData from '../../../src/components/appData'
import config from '../../../src/components/config'
import Vue from 'vue'
import co from 'co'
let usersearch = function * (self) {
  // config.resultUrl +
  let condition = `1=1 and s.f_charge_state = '有效'`
  for (var key in self.model) {
    console.log(key);
    if (self.model[key] !== '' ) {
        condition  = condition + ` and s.${key} like '%${self.model[key]}%'`
      console.log(condition);
    }
  }
  yield self.$post(config.resultUrl +'rs/sql/handpay', {data: {condition:condition}},
   {resolveMsg: null, rejectMsg: null})
  .then ((res)=> {
    self.user = res.data
  })
  .catch ((res)=> {
    self.$showMessage('获取用户数据失败，请查看你输入的查询信息')
  })
}
export default {
  title:'缴费明细',
  data () {
    return {
      model: {
        f_meterbook_id:'',
        f_userinfo_id: '',
        f_user_name: '',
        f_delivery_date: Util.toStandardDateString()
      },
      user: []
    }
  },
  methods: {
    search () {
      let gen = usersearch(this)
      return co(gen)
    }
  }
}
</script>
